<template>
  <div class="container">
    <div class="header">
      <div class="title">企业TOP5</div>
      <div class="sub-title">按预算</div>
    </div>
    <ul class="list">
      <li class="list-item">
        <span class="text">中致江苏</span>
        <span class="percentage">107.30%</span>
      </li>
      <li class="list-item">
        <span class="text">中致四川</span>
        <span class="percentage">102.70%</span>
      </li>
      <li class="list-item">
        <span class="text">中致薪税</span>
        <span class="percentage">101.85%</span>
      </li>
      <li class="list-item">
        <span class="text">中致山东</span>
        <span class="percentage">101.38%</span>
      </li>
      <li class="list-item">
        <span class="text">浙江中致</span>
        <span class="percentage">100.28%</span>
      </li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style scoped>
.container {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 1);
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 10px 20px;
  background: #F5F7FF;
  border-radius: 5px;;
}

.header .title {
  font-size: 20px;
  color: #4CAF50;
}

.header .sub-title {
  font-family: 'PingFang', serif;
  font-size: 16px;
  color: #3B70F6;
  font-weight: 600;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item .text {
  font-family: 'PingFang', serif;
  font-size: 14px;
  font-weight: 600;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 50px;
  color: #333;
}

.list-item .percentage {
  font-family: 'PingFang', serif;
  font-size: 14px;
  color: #44444F;
  letter-spacing: 0.1px;
  text-align: right;
  line-height: 24px;
  font-weight: 600;
}
</style>